<template>
	<view class="content">

		<view class="search">
			<text>{{t('community.name')}}</text>
			<view class="input">
				<image src="@/static/imgs/community/search-icon.png" mode=""></image>
				<input type="text" :placeholder="t('community.search')" @input="onKeyInput"
					placeholder-class="placeholder-class">
			</view>
		</view>
		<view class="tabs">
			<u-tabs :list="tabslist" lineWidth="24" lineColor="rgba(34, 34, 34, 1)" :activeStyle="{
			  
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.2)'
		        }" :inactiveStyle="{
		            color: ' rgba(102, 102, 102, 1)',
		            transform: 'scale(1)'
		        }" @click="click"></u-tabs>
		</view>
		<view class="list_0" v-if="sindex == 1">
			<view class="list_li" v-for="item in dataList">
				<view @click="goInfo(item)">
					<text class="li_title">{{item.title}}</text>
					<text class="li_text">{{item.summary}}</text>
					<view class="li_imgs">
						<image :src="urlConversion(item.cover)" mode=""></image>
					</view>
				</view>

				<!-- <view class="li_bottom_text">
					<text>#花粉过敏 </text>
					<text>#树粉过敏</text>
				</view> -->
				<!-- <view class="li_bottom_fenxiang" @tap="openshowfen">
					<image src="@/static/imgs/community/fenxiang.png" mode=""></image>
					<text>分享</text>
				</view> -->
			</view>
			<u-loadmore :status="status[statusindex]" />
		</view>
		<view class="list_1" v-else-if="sindex == 2">
			<view class="gene-li" v-for="item in dataList" @click="goInfo(item)">
				<view class="li-left">
					<view class="left-top">

						{{item.title}}
					</view>
					<view class="left-bottom">
						<text>{{item.time_format}}</text>
					</view>
				</view>
				<view class="li-right">
					<image :src="urlConversion(item.cover)" mode=""></image>
				</view>
			</view>
			<u-loadmore :status="status[statusindex]" />
		</view>
		<u-popup :show="showfen" @close="closeshowfen" @open="openshowfen" :round="20">
			<view class="popup-box">
				<text class="box-title">分享到</text>
				<view class="box-imgs">
					<view class="img-box">
						<image src="@/static/imgs/community/wx.png" mode=""></image>
						<text>微信好友</text>
					</view>
					<view class="img-box">
						<image src="@/static/imgs/community/pyq.png" mode=""></image>
						<text>朋友圈</text>
					</view>
					<view class="img-box">
						<image src="@/static/imgs/community/qq.png" mode=""></image>
						<text>QQ好友</text>
					</view>
					<view class="img-box">
						<image src="@/static/imgs/community/wb.png" mode=""></image>
						<text>微博</text>
					</view>
				</view>
				<view class="quxiao" @tap="closeshowfen">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,watch
	} from 'vue'
	import {
		categoryList
	} from "@/api/category/category.js"
	import {
		urlConversion
	} from '@/utils/imgUrl.js'
	import {
		useI18n
	} from "vue-i18n";
import {
		useAppStore
	} from '@/store/index.js'
	const {
		t
	} = useI18n()
	const store = useAppStore()
	watch(() => store.Lang,
	    (newValue, oldValue) => {
			tabslist.value =[{
			name: t('community.Todayfocus')
		},
		{
			name: t('community.consultation')
		}
	]
	    })
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	const sindex = ref(1)
	const showfen = ref(false)
	const tabslist = ref([{
			name: t('community.Todayfocus')
		},
		{
			name: t('community.consultation')
		}
	])
	let cursor = ref(0)
	const statusindex = ref(0)
	const status = ref([
		'loadmore',
		'loading',
		'nomore'
	])
	let dataList = ref([])
	const inputKey = ref('')
	onReachBottom(() => {
		if (statusindex.value == 2) return;
		statusindex.value = 1;

		setTimeout(() => {
			show();
		}, 600)
	})

	show()

	function show() {
		categoryList({
			section: sindex.value,
			cursor: cursor.value,
			limit: 10,
			key: inputKey.value
		}).then(res => {
			if (res.data.infs.length == 0 || res.data.infs.length < 10) {
				statusindex.value = 2
			} else {
				statusindex.value = 1
			}
			dataList.value = [...dataList.value, ...res.data.infs];
			cursor.value = res.data.cursor
		})
	}
	const openshowfen = () => {
		showfen.value = true
	}
	const closeshowfen = () => {
		showfen.value = false
	}
	const click = (item) => {
		console.log(item.index);
		sindex.value = item.index + 1
		cursor.value = 0
		statusindex.value = 0
		dataList.value = []
		show()
	}

	function goInfo(item) {
		console.log(item.id)
		uni.navigateTo({
			url: '/pages/home/info?id=' + item.id
		})
	}

	function onKeyInput(e) {
		inputKey.value = e.detail.value
		dataList.value = []
		cursor.value = 0
		statusindex.value = 0
		show()
	}
</script>

<style scoped lang="scss">
	.content {
		padding-top: 92rpx;
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg, #F0F7FF 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);
	}

	.popup-box {
		padding-top: 36rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.box-title {
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 18px;
			color: rgba(34, 34, 34, 1);
			margin-bottom: 56rpx;
		}

		.quxiao {
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 18px;
			color: rgba(173, 173, 173, 1);
		}

		.box-imgs {
			border-bottom: 1px solid rgba(247, 247, 252, 1);
			box-sizing: content-box;
			padding-bottom: 76rpx;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.img-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 16rpx;
				}

				text {
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 18px;
					color: rgba(102, 102, 102, 1);
				}
			}
		}
	}

	.tabs {
		margin-left: 32rpx;
		margin-top: 40rpx;
	}

	.list_1 {
		padding: 32rpx;

		.gene-li:last-child {
			border: none;
		}

		.gene-li {
			flex-shrink: 0;
			margin-bottom: 32rpx;
			box-sizing: content-box;
			padding-bottom: 34rpx;
			border-bottom: 1px solid rgba(242, 244, 247, 1);
			width: 100%;

			opacity: 1;

			display: flex;
			justify-content: space-between;

			.li-right {
				flex-shrink: 0;
				width: 202rpx;
				height: 178rpx;
				overflow: hidden;
				opacity: 1;
				border-radius: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.li-left {
				margin-right: 32rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.left-top {

					vertical-align: middle;
					font-size: 16px;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 24px;
					color: rgba(0, 0, 0, 1);

					image {
						display: inline-block;
						vertical-align: middle;
						flex-shrink: 0;
						margin-right: 12rpx;
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 8rpx;
					}
				}

				.left-bottom {
					font-size: 12px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 18px;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.list_0 {
		.list_li:last-child {
			border: none;
		}

		.list_li {
			width: 100%;

			display: flex;
			flex-direction: column;
			padding: 32rpx;
			padding-bottom: 28rpx;
			border-bottom: 1px solid rgba(242, 244, 247, 1);

			.li_title {
				margin-bottom: 8rpx;
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(34, 34, 34, 1);
			}

			.li_text {
				display: block;
				margin-bottom: 20rpx;
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 18px;
				color: rgba(102, 102, 102, 1);
			}

			.li_imgs {
				margin-bottom: 12rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 210rpx;
					height: 174rpx;
				}
			}

			.li_bottom_text {
				margin-bottom: 48rpx;
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 18px;
				color: rgba(34, 34, 34, 1);
			}

			.li_bottom_fenxiang {
				align-self: flex-end;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}

				text {
					font-size: 12px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 18px;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.search {
		width: 100%;
		padding: 0 32rpx;
		padding-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 27px;
			color: rgba(34, 34, 34, 1);
		}

		.input {
			width: 582rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 244rpx;
			padding: 20rpx 24rpx;
			display: flex;
			align-items: center;
			border: 1px solid rgba(61, 61, 61, 1);

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 18rpx;
			}

			.placeholder-class {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 19.6px;
				color: rgba(185, 190, 196, 1);
			}
		}
	}
</style>